import React from 'react';
// 密码登录组件
// 引入验证码组件
import Captcha from '../../components/Captcha';
import { Button, Form, Input, Space,message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined,PictureOutlined } from '@ant-design/icons';
// 引入状态hook
import { useState } from 'react';
// 导入hook用来操作redux 
import {useDispatch} from 'react-redux';
// 导入hook用来进行路由跳转
import { useHistory } from 'react-router-dom'
// 导入 hook操作子组件实例 
import { useRef } from 'react'
// 导入密码登录接口
import { normalloginFn } from '../../api/login';

const NormalLogin = () => {
    const [key, setKey] = useState('');
     // 创建dispatch 方法
     const dispatch = useDispatch();
     // 创建路由跳转对象
     const history = useHistory();
     // 创建ref 对象
     const ref1 = useRef();
     // 获取form 表单实例(antd form 表单提供的方法)
     const [form] = Form.useForm();

    // 登录验证成功执行的函数
    const onFinish = (values) => {
        // 将key 属性添加到 values 对象中，value对象就是表单输入内容
        values.key = key
        //调用登录接口
        normalloginFn(values).then(res => {
            // console.log('res', res);
            // 将用户菜单项存入redux中
            if (res.data.errNo == 0) {
                dispatch({ type: 'updateacl', payload: res.data.context.acl })
                // 提示登录成功
                message.success('登录成功', 1, () => {
                    // 跳转到首页
                    history.push('/dashboard')
                })
            } else {
                // 登录失败重新更新验证码,并且将输入框中上一次输入的结果清空
                ref1.current.loadashFn();
                // 提示登录失败并清空表单项
                message.error(res.data.errText, 1, () => {
                    form.setFieldsValue({
                        username: '',
                        password: '',
                        captcha: ''
                    })
                })
            }
        })

    };

    // 登录验证失败执行的函数
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    // 定义一个savekey函数,获取验证码key
    const saveKey = (key) => {
        // console.log(key);
        setKey(key)
    }
    return (
        <div>
            <Form
                name="basic"
                wrapperCol={{
                    span: 23,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                size='large'
                // 表单实例属性
                form={form}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                    ]}
                >
                    <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="密码" />
                </Form.Item>
                {/* 图形验证 */}
                <Space>
                <Form.Item
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: '请输入图形验证码',
                        },
                    ]}
                >
                    
                    <Input prefix={<PictureOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
                </Form.Item>
                <Form.Item>
                     {/* 验证码组件 */}
                     {/* 运用父传给子函数，子组件调用函数实现子传父，父组件收到key */}
                    <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha>
                </Form.Item>
                </Space>
                <Form.Item
                    wrapperCol={{
                        span: 23,
                    }}
                >
                    <Button type="primary" htmlType="submit" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default NormalLogin;
